<template>
  <el-drawer  :show-close="false" class="BaseDrawer">
    <template #header>
      <div class="header  flex items-center text-lg p-5">
        <div class="flex">
          <BaseIcon v-if="props.icon" class="mr-1.5" :icon="props.icon" :size="20"></BaseIcon>
          <span>{{props.title}}</span>
        </div>
        <div class="flex-1 flex flex-row-reverse">
          <el-space class="base-space" wrap v-if="!slots.button">
            <el-button :loading="props.loading" @click="confirm" type="primary">{{props.confirmText}}</el-button>
            <el-button :loading="props.loading" @click="close" >{{props.closeText}}</el-button>
          </el-space>
          <slot v-else name="button"></slot>
        </div>
      </div>
    </template>
    <slot></slot>
  </el-drawer>
</template>

<script setup lang="ts">
import {useSlots} from "vue";

const props = defineProps({
  title: {
    type: String,
    default: '标题'
  },
  icon:{
    type: String
  },
  confirmText:{
    type: String,
    default: '确定'
  },
  closeText:{
    type: String,
    default: '关闭'
  },
  loading:{
    type: Boolean,
    default: false
  }
})
const slots = useSlots()
const  emit = defineEmits(['confirm','close'])
const confirm = () => {
  emit('confirm')
}
const close = () => {
  emit('close')
}
</script>

<style lang="scss">
.BaseDrawer{
  .el-drawer__header{
    padding: 0px;
    margin-bottom: 0px;
    .header{
      border-bottom: 1px solid var(--el-border-color);
      color: var(--el-text-color-primary);
      svg{
        color: var(--el-color-primary) !important;
      }
    }
  }
}
</style>